<template>
  <div class="d_mainFlex">
    <div class="d_treeBox p10">
      <el-form
        ref="materForm"
        :model="form"
        :rules="rules"
        hide-required-asterisk
        label-width="auto"
        class="dialogForm dialogInlineForm"
        label-position="top"
      >
        <el-row>
          <el-col>
            <el-form-item label="操作人员">
              <div class="flex">
                <el-input
                  v-model="name"
                  size="small"
                  placeholder="输入工号或扫码"
                  disabled
                />
                <el-button
                  size="small"
                  type="primary"
                  style="margin-left: 5px; min-width: 70px"
                  @click="loginModel = true"
                >切换
                </el-button
                >
              </div>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="生产单号" prop="produceTaskBillNo">
              <el-input
                v-model.trim="form.produceTaskBillNo"
                size="small"
                ref="produceTaskBillNo"
                @keyup.enter.native="handleSubmit"
                placeholder="输入生产单号或扫码"
              />
            </el-form-item>
          </el-col>
          <el-col>
            <el-button
              type="primary"
              size="small"
              style="width: 100%; margin-top: 10px"
              @click.native.prevent="handleSubmit"
            >确定
            </el-button
            >
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="case">
      <na-table
        :datas.sync="tableData"
        :searchObj.sync="search"
        @updateDatas="getAllMaterils"
      >
      </na-table>
    </div>

    <!-- 切换账号 -->
    <el-dialog
      title="快速登录"
      :visible.sync="loginModel"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog "
      width="25%"
    >
      <div class="p16 pt0">
        <el-form
          ref="loginForm"
          :model="loginForm"
          :rules="loginRules"
          hide-required-asterisk
          label-width="auto"
          class="dialogForm dialogInlineForm"
          label-position="top"
        >
          <el-row>
            <el-col>
              <el-form-item label="登录账号" prop="loginAccount">
                <el-input
                  v-model="loginForm.loginAccount"
                  size="small"
                  placeholder="输入登录账号"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="登录密码" prop="loginPassWord">
                <el-input
                  v-model="loginForm.loginPassWord"
                  size="small"
                  placeholder="输入登录密码"
                />
              </el-form-item>
            </el-col>
            <el-col>
              <el-button
                type="primary"
                size="small"
                style="width: 100%; margin-top: 10px"
                @click.native.prevent="handleLogin"
              >确认登录
              </el-button
              >
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>

    <!-- 成品缴库 -->
    <el-dialog
      :title="'成品缴库 - ' + titleName"
      :visible.sync="workmanshipModel"
      :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog bigDialogh85"
      @close="closeDialog"
      width="85%"
    >
      <div class="model"></div>
      <div class="p16">
        <el-form
          ref="formModel"
          :model="formModel"
          :rules="loginRules"
          hide-required-asterisk
          label-width="auto"
          class="dialogForm dialogInlineForm"
        >
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="单据单号" prop="loginAccount">
                <el-input
                  v-model="formModel.handInBillNo"
                  size="small"
                  placeholder="系统自动生成"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作日期" prop="createDate">
                <el-input
                  v-model="formModel.createDate"
                  size="small"
                  placeholder="操作日期"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="操作人员" prop="createPersonName">
                <el-input
                  :value="titleName == '新建'?name:rowData.handInPersonName"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="关联单号" prop="produceTaskBillNo">
                <el-input
                  v-model="formModel.produceTaskBillNo"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="缴库类型" prop="handInType">
                <el-select
                  v-model="formModel.handInType"
                  size="small"
                  disabled
                  filterable
                  placeholder="请选择"
                >
                  <el-option label="成品缴库" :value="1"></el-option>
                  <el-option label="半成品缴库" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单单号" prop="xieYiShuHao">
                <el-input
                  v-model="formModel.xieYiShuHao"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="产品编号" prop="productNo">
                <el-input v-model="formModel.cpCode" size="small" disabled/>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="产品名称" prop="orderProductName">
                <el-input
                  v-model="formModel.orderProductName"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="版面">
                <el-input
                  :value="productFrom.orderBaseData?productFrom.orderBaseData.productLayout:''"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="所属客户" prop="customerName">
                <el-input
                  v-model="formModel.customerName"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="客户单号" prop="customerBillNo">
                <el-input
                  v-model="formModel.customerBillNo"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="版本">
                <el-input
                  :value="formModel.version"
                  size="small"
                  disabled
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="24">
              <el-form-item label="备注" prop="handInRemark">
                <el-input
                  type="textarea"
                  v-model="formModel.handInRemark"
                  :disabled="isDisable"
                  :rows="2"
                  placeholder="请输入内容"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <div class="mt16" v-if="this.formModel.productStyle == 2">
            <div class="cTitle">
              <h3>包装信息(卷式)</h3>
            </div>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="每卷等于">
                  <el-input
                    v-model="formModel.pageEqualTags"
                    placeholder="请输入内容"
                    @input="$forceUpdate()"
                    :disabled="isDisable"
                    size="small"
                  >
                    <template slot="append">{{
                        formModel.productUnion
                      }}
                    </template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="mt16" v-else>
            <div class="cTitle">
              <h3>包装信息(平张/折页)</h3>
            </div>
            <el-row :gutter="24">
              <el-col :span="8">
                <el-form-item label="计算方式">
                  <el-select
                    v-model="formModel.calculationMethod"
                    size="small"
                    style="width: 100%"
                    :disabled="isDisable"
                    filterable
                    placeholder="请选择"
                    @change="handleSelectChange"
                  >
                    <el-option
                      :label="formModel.productUnion+'/张'"
                      :value="0"
                    >
                    </el-option>
                    <el-option label="套/张" :value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item :label="'每' + packingUnitLable + '等于'">
                  <el-input
                    v-model="formModel.pageEqualTags"
                    @input="$forceUpdate()"
                    :disabled="isDisable"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <template slot="append">{{ packingUnit }}</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="每包等于">
                  <el-input
                    v-model="formModel.packageEqualPages"
                    :disabled="isDisable"
                    @input="$forceUpdate()"
                    placeholder="请输入内容"
                    size="small"
                  >
                    <template slot="append">张</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="cTitle">
            <h3>缴库明细</h3>
          </div>
          <el-table
            :data="formModel.mxDataList"
            ref="mxDataListTable"
            border
            style="width: 100%"
            :row-class-name="rowClassName"
          >
            <el-table-column prop="cartonName" label="成品型号" width="160">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.productSpecificationCode"
                  placeholder="请选择成品型号"
                  :disabled="isDisable"
                  size="small"
                  filterable
                >
                  <el-option
                    :key="item.productSpecificationCode"
                    :label="item.productSpecificationName"
                    :value="item.productSpecificationCode"
                    v-for="(item, index) in modelList"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column prop="cartonName" label="纸箱规格" width="140">
              <template slot-scope="scope">
                <el-input
                  v-if="isDisable"
                  size="small"
                  v-model="scope.row.cartonName"
                  disabled
                ></el-input>
                <el-popover
                  v-else
                  :ref="'popover' + scope.$index"
                  placement="right"
                  width="600"
                  trigger="click"
                >
                  <el-input
                    size="small"
                    slot="reference"
                    v-model="scope.row.cartonName"
                    :disabled="isDisable"
                    @focus="handleFocus(scope.$index)"
                  ></el-input>

                  <div class="mb16" style="width: 200px">
                    <el-input
                      placeholder="请输入内容"
                      size="small"
                      v-model="searchCarton.likeWords"
                    >
                      <el-button
                        slot="append"
                        icon="el-icon-search"
                        @click="handleSearch"
                      ></el-button>
                    </el-input>
                  </div>
                  <el-table
                    :data="cartonList"
                    border
                    height="200"
                    @row-dblclick="handleCartonDblclick"
                  >
                    <el-table-column type="index" label="序号" width="50">
                    </el-table-column>
                    <el-table-column
                      prop="cartonCode"
                      label="纸箱编号"
                    ></el-table-column>
                    <el-table-column
                      prop="cartonName"
                      label="纸箱规格"
                    ></el-table-column>
                    <el-table-column
                      prop="cartonWeight"
                      label="纸箱重量"
                    ></el-table-column>
                  </el-table>
                  <div
                    class="page_column"
                    style="
                      border-left: 1px solid #ebeef5;
                      border-bottom: 1px solid #ebeef5;
                      border-right: 1px solid #ebeef5;
                    "
                  >
                    <pagination
                      :total="totalCarton || 0"
                      :page.sync="searchCarton.pageIndex"
                      :limit.sync="searchCarton.pageSize"
                      @pagination="getCartonList"
                    />
                  </div>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              prop="eachBoxPackageQuantity"
              width="100"
              align="center"
              :label="'每箱' + unitName + '数'"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.eachBoxPackageQuantity"
                  :disabled="isDisable"
                  placeholder="请输入内容"
                  size="small"
                  @change="calculation(scope.row, scope.$index)"
                />
              </template>
            </el-table-column>
            <el-table-column width="100" prop="eachBoxQuantity" label="每箱数量">
              <!--              <template slot-scope="scope">
                              <el-input
                                v-model="scope.row.eachBoxQuantity"
                                :disabled="isDisable"
                                size="small"
                              ></el-input>
                            </template>-->
            </el-table-column>
            <el-table-column width="140" prop="handInType" label="缴库类型">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.handInType"
                  placeholder="请选择缴库类型"
                  :disabled="isDisable"
                  size="small"
                  filterable
                >
                  <el-option
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    v-for="(item, index) in handInTypeList"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column width="140" prop="handInQuantity" label="缴库数量">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.handInQuantity"
                  :disabled="isDisable"
                  size="small"
                  @blur="changHandInBoxs(scope.row)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column width="100" prop="handInBoxs" label="缴库箱数">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.handInBoxs"
                  :disabled="isDisable"
                  size="small"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              prop="packageDescription"
              label="包装描述"
            >
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.packageDescription"
                  :disabled="isDisable"
                  size="small"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column width="120" prop="kilogramQuantity" label="公斤数">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.kilogramQuantity"
                  :disabled="isDisable"
                  size="small"

                  @change="changKilogramQuantity(scope.row)"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="handInMxRemark" label="备注" width="300">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.handInMxRemark"
                  :disabled="isDisable"
                  size="small"
                ></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="80"
              v-if="ops != 'see'"
            >
              <template slot-scope="scope">
                <div class="flex flex_between pl8 pr8">
                  <i
                    class="el-icon-document-copy"
                    v-if="scope.row.cartonName"
                    @click="handleCopyRow(scope.row, scope.$index)"
                  ></i>
                  <i
                    class="el-icon-delete"
                    v-if="scope.row.cartonName"
                    @click="handleDeleteRow(scope.row, scope.$index)"
                  ></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <!-- <div>
            <el-checkbox v-model="checked">继续新建下一条</el-checkbox>
          </div> -->
        <div>
          <el-button size="mini" @click="workmanshipModel = false"
          >取 消
          </el-button
          >
          <!--  保存 -->
          <el-button
            size="mini"
            @click="handleSeeorder"
          >查看工单
          </el-button
          >
          <!--  保存 -->
          <el-button
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="handleSave"
            v-if="ops == 'edit' || ops == 'add'"
          >仅保存
          </el-button
          >
          <el-button
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="handleSaveConfirm"
            v-if="ops == 'edit' || ops == 'add'"
          >保存并确认
          </el-button
          >
          <el-button
            element-loading-spinner="el-icon-loading"
            type="primary"
            size="mini"
            @click="handleConfirmSubmit"
            v-if="ops == 'confirm'"
          >确认
          </el-button
          >
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title="查看工单"
      :visible.sync="seeOrder"
      :close-on-click-modal="false"
      :fullscreen="true"
      custom-class="bodyNoPadDialog "
    >
    <iframe ref="myIframe" :src="'/#/production/productionOrderNewDetail?produceTaskBillNo='+rowData.produceTaskBillCode+'&productCode='+rowData.productCode+'&typeStatus=1&isIframe='+true" style="width:100%;height:100%" frameborder="0"></iframe>
  </el-dialog>
  </div>
</template>
<script>
import {arraySort} from "@/utils";
import HeadSeting from "@/components/HeadSeting";
import Pagination from "@/components/Pagination";
import perRedioDialog from "@/components/perDialogRedio";
import SelectMateriaList from "@/components/selectMaterial";
import naTable from "@/components/naTable";
import pinyin from "js-pinyin";
import {mapGetters} from "vuex";
import screec from "@/components/screen";
import picking from "./components/picking";
import returnMaterial from "./components/returnMaterial";
import {number} from "yargs";

export default {
  name: "Materiel",
  components: {
    Pagination,
    HeadSeting,
    screec,
    picking,
    returnMaterial,
    perRedioDialog,
    SelectMateriaList,
    naTable,
  },
  computed: {
    ...mapGetters(["name"]),

    titleName() {
      if (this.ops == "add") {
        return "新建";
      } else if (this.ops == "edit") {
        return "修改";
      } else if (this.ops == "see") {
        return "查看";
      } else if (this.ops == "confirm") {
        return "确认";
      }
    },
  },
  data() {
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码长度不正确"));
      } else {
        callback();
      }
    };
    return {
      form: {
        produceTaskBillNo: "", //订单编号
        deviceCraftCode: "", //机台工艺编号
      },

      loginForm: {
        loginAccount: "", //账号
        loginPassWord: "", //密码
      },
      rowData:'',
      seeOrder:false,
      moduleStata: false,
      dataList: [{}],
      loginRules: {
        loginAccount: [
          {
            required: true,
            trigger: "blur",
            message: "请输入账号",
          },
        ],
        loginPassWord: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
      },
      ops: "",
      rowID: "",
      handInTypeList:[{
        label:'订单缴库',
        value:0
      },{
        label:'成品缴库',
        value:1
      }],
      //成品缴库表单
      formModel: {
        handInBillNo: "",
        handInType: 0,
        saleOrderNo: "",
        productNo: "",
        customerCode: "",
        handInPerson: "",
        handInRemark: "",
        produceTaskBillCode: "",
        productCode:'',
        // pageEqualTags: 0,
        // packageEqualPages: 0,
        // boxEqualPackages: 0,
        // boxEqualTags: 0,
        // calculationMethod: 0,
        mxDataList: [{}],
      },
      copyForm: {},
      productInfo: {},

      search: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        QueryDataBaseFiled: "",
        likeWords: "",
        handInType: 0, //缴库类型
        handInBillState: -1, //缴库单据状态：0待确认；1已确认；2已作废；3已完成，-1查询全部
        inStockState: -1, //入库状态：0待入库；1已入库；2已拒绝，-1查询全部
      },

      //纸箱列表搜索条件
      searchCarton: {
        pageIndex: 1,
        pageSize: 30,
        likeWords: "",
        isShowDisabled: 1,
        queryDataBaseFiled: "",
      },
      cartonList: [], //纸箱列表数据
      totalCarton: 0, //纸箱列表总条数
      showPopover: false, //纸箱列表弹出层
      checked: false, //是否继续新建下一条
      rowIndex: 0, //纸箱列表下标

      total: 0,
      dataLists: [],
      tableHead: [],
      tableHeight: null, // 表格最大高度
      tableScreenHead: [],
      bcList: [],
      workmanshipModel: false, //成品缴库弹窗

      modelList: [],

      packingUnitLable: "",
      packingUnit: "",

      searchLoading: false,
      loginModel: false,

      loading: null,

      productFrom: {
        baseData: {},
        packageData: {},
        orderBaseData: {},
        productData: {},
        productInfo: {
          productLayout: ''
        }
      },
      isDisable: false, // 是否禁用输入框
      unitName: '',
      type: "",
      index: 0,
      rules: {
        produceTaskBillNo: [
          {
            required: true,
            message: "请输入生产单号",
            trigger: ["change", "blur"],
          },
        ],
        deviceCraftCode: [
          {
            required: true,
            message: "请输入机台工艺编码",
            trigger: ["change", "blur"],
          },
        ],
      },

      tableData: {
        headId: "head", //表头列显隐组件所需ID-避免多个页面id重复问题
        tableId: "workTaskID", //表格列表key,也就是一条数据的唯一标识
        senior: false, //高级搜索是否显示
        disableWord: "", //是否禁用显示的字段
        disableStatus: "", //判断未禁用的状态值
        addTitle: "", //新建按钮名称-为''则不显示，为undefine则为新建
        addPermission: "", //新建按钮权限
        voidWord: "isDisabled", //需要查询作废的字段
        statusList: [], //状态筛选条件列表
        statusWord: "", //状态筛选的字段
        refresh: true, //刷新按钮
        //表格按钮
        operationBtn: [
          {
            title: "查看", //按钮名称
            methodsName: "handleSeeClick", //按钮绑定方法的字段
          },
          {
            title: "修改",
            methodsName: "handleUpdata",
            hideCondition: {
              //按钮显隐条件
              prop: "handInBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "确认",
            methodsName: "handleConfirm",
            hideCondition: {
              //按钮显隐条件
              prop: "handInBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "撤回",
            methodsName: "handleWithdraw",
            hideCondition: {
              //按钮显隐条件
              prop: "isWithdraw", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                1,
              ],
            },
          },
          {
            title: "删除",
            methodsName: "handleDelete",
            permission: "MenuCode4-1-5", //按钮权限
            hideCondition: {
              //按钮显隐条件
              prop: "handInBillState", //控制显隐的状态字段
              show: [
                //有哪些状态可以使用-值必须跟状态的类型保持一致
                0,
              ],
            },
          },
          {
            title: "打印装箱单",
            methodsName: "handleDownload",
          },
          {
            title: "打印缴库单",
            methodsName: "handleDownloadTreasury",
          },
          {
            title: "打印发货缴库单",
            methodsName: "handleDownloadTreasury1",
          },
          {
            title: "打印库存缴库单",
            methodsName: "handleDownloadTreasury2",
          },
        ],
        //表格内容
        tbody: [],
        //表格表头
        thead: [],
      },
    };
  },
  created() {
    // 基础数据表格得表头
    this.getTableHead();
    this.copyForm = JSON.parse(JSON.stringify(this.formModel));
    //获取纸箱列表数据
    this.getCartonList();
  },
  mounted() {
  },
  methods: {
    //登录
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.loginForm)
            .then(() => {
              // this.$router.push({ path: '/scanning/code' })
              location.reload();
              // location.reload(true)
              this.loading = false;
            })
            .catch(() => {
              this.loading = false;
            });
        } else {
          return false;
        }
      });
    },

    getUnitName() {
      if (this.formModel.productStyle == 2) {
        this.unitName = "卷";
      } else {
        this.unitName = "包";
      }
    },


    //时间格式化
    dateFtt(fmt, date) {
      //author: meizz
      var o = {
        "M+": date.getMonth() + 1, //月份
        "d+": date.getDate(), //日
        "h+": date.getHours(), //小时
        "m+": date.getMinutes(), //分
        "s+": date.getSeconds(), //秒
        "q+": Math.floor((date.getMonth() + 3) / 3), //季度
        S: date.getMilliseconds(), //毫秒
      };
      if (/(y+)/.test(fmt))
        fmt = fmt.replace(
          RegExp.$1,
          (date.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length == 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
      return fmt;
    },

    //查看工单
    handleSeeorder(){
      this.seeOrder = true;
      this.$refs.myIframe.contentWindow.location.reload(true);
    },

    //点击确定
    handleSubmit() {
      this.isDisable = false;
      const _data = {
        produceTaskID: 0,
        produceTaskBillNo: this.form.produceTaskBillNo,
      };
      this.formModel.handInBillNo = "";
      this.$refs.materForm.validate((valid) => {
        if (valid) {
          this.$api.product.GetProduceTaskBillDetail(_data).then((res) => {
            this.productFrom = res;
            this.$api.product
              .GetOrderProductSpecificationBySaleOrderCode({
                queryBy: 0,
                queryValue: res.orderBaseData.orderNo,
              })
              .then((res) => {
                this.modelList = res;
              });
            this.ops = "add";
            this.formModel.pageEqualTags =
              res.productInfo.baseData.pageEqualTags;
            this.formModel.packageEqualPages =
              res.productInfo.baseData.packageEqualPages;
            this.productInfo = res.productInfo
            this.formModel.productStyle = res.productInfo.baseData.productStyle;
            this.formModel.customerCode = res.productInfo.baseData.customerCode
            this.formModel.produceTaskBillNo = res.baseData.produceTaskBillNo; //关联单号
            this.formModel.createDate = res.baseData.createDate; //操作日期
            this.formModel.createPersonName = res.baseData.createPersonName; //操作人员
            this.formModel.handInType = 1; //缴库类型
            this.formModel.xieYiShuHao = res.orderBaseData.saleOrderGroupNumber; //订单单号
            // this.formModel.productNo = res.baseData.cpProductNo; //成品代码
            this.formModel.productNo = res.productInfo.baseData.productCode;
            this.formModel.cpCode = res.productInfo.baseData.productNumber; //产品编号
            this.formModel.orderProductName =
              res.productInfo.baseData.productName; //产品名称
            this.formModel.produceTaskBillCode = this.form.produceTaskBillNo;
            // this.formModel.orderProductVersion =
            //   res.productInfo.baseData.productLayout +
            //   "V" +
            //   res.productInfo.baseData.newVersion +
            //   "." +
            //   res.productInfo.baseData.updateVersion; //版本版面
            this.formModel.version = res.productInfo.baseData.newVersion +
              "." +
              res.productInfo.baseData.updateVersion
            this.formModel.customerBillNo = res.orderBaseData.customerBillNo; //客户单号
            this.formModel.saleOrderNo = res.baseData.saleOrderNo; //销售订单号
            this.formModel.customerName = res.productInfo.baseData.customerName; //所属客户
            this.formModel.productUnion = res.productInfo.baseData.productUnit; //单位
            this.formModel.calculationMethod = Number(
              res.productInfo.baseData.calculationMethod
            );
            if (res.productInfo.baseData.calculationMethod == 0) {
              this.packingUnitLable = "张";
              this.packingUnit = "套";
            } else if (res.productInfo.baseData.calculationMethod == 1) {
              this.packingUnitLable = "套";
              this.packingUnit = "张";
            }
            this.getUnitName()
            this.formModel.productNo = res.productInfo.baseData.productCode; //成品代码
            this.formModel.mxDataList.push({isShow: true});
            for (let index = 0; index < 20; index++) {
              this.formModel.mxDataList.push({isShow: false});
            }
            this.$forceUpdate();
            this.workmanshipModel = true;
          });
        }
      });
    },
    //撤回
    handleWithdraw(row){
      const parmas = {
        handInID: row.handInID,
      };
      this.$confirm("是否确定撤回该数据?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.product.RevokeProductHandInBill(parmas).then(() => {
          this.getAllMaterils();
          this.$message({
            message: "撤回成功",
            type: "success",
          });
        });
      });
    },

    //修改
    handleUpdata(row) {
      this.rowData = row
      console.log(row);
      this.formModel.handInBillNo = row.handInBillNo;
      this.rowID = row.handInID;
      this.getDetail(row);
      this.ops = "edit";
      this.isDisable = false;
    },

    //查看
    handleSeeClick(row) {
      this.rowData = row
      this.formModel.handInBillNo = row.handInBillNo;
      this.rowID = row.handInID;
      console.log(row);
      this.getDetail(row);
      this.ops = "see";
      this.isDisable = true;
    },

    //确认
    handleConfirm(row) {
      this.rowData = row
      this.formModel.handInBillNo = row.handInBillNo;
      this.rowID = row.handInID;
      this.getDetail(row);
      this.ops = "confirm";
      this.isDisable = true;
    },

    getIndex(index) {
      return index;
    },

    //获取详情
    getDetail(row) {
      const _data = {
        produceTaskID: 0,
        produceTaskBillNo: row.produceTaskBillCode,
      };
      this.$api.product.GetProduceTaskBillDetail(_data).then((res) => {
        this.productFrom = res;
        console.log(this.productFrom)
        row.detailList.forEach((item) => {
          item.cartonName = item.cartonSizeName;
          // item.eachBoxPackageQuantity = item.eachBoxQuantity
          item.isShow = true;
        });
        // this.formModel = JSON.parse(JSON.stringify(row));
        this.formModel.mxDataList = JSON.parse(JSON.stringify(row.detailList));
        this.$api.product
          .GetOrderProductSpecificationBySaleOrderCode({
            queryBy: 0,
            queryValue: res.orderBaseData.orderNo,
          })
          .then((res) => {
            this.modelList = res;
          });
        this.formModel.productStyle = res.productInfo.baseData.productStyle;
        this.formModel.handInRemark = row.handInRemark;
        this.formModel.pageEqualTags = res.productInfo.baseData.pageEqualTags;
        this.formModel.packageEqualPages =
          res.productInfo.baseData.packageEqualPages;
        this.formModel.produceTaskBillNo = res.baseData.produceTaskBillNo; //关联单号
        this.formModel.createDate = res.baseData.createDate; //操作日期
        this.formModel.createPersonName = res.baseData.createPersonName; //操作人员
        this.formModel.handInType = 1; //缴库类型
        this.formModel.xieYiShuHao = res.orderBaseData.saleOrderGroupNumber; //订单单号
        // this.formModel.productNo = res.baseData.cpProductNo; //成品代码
        this.formModel.productNo = res.productInfo.baseData.productCode; //成品代码
        this.formModel.cpCode = res.productInfo.baseData.productNumber; //产品编号
        this.formModel.orderProductName = res.productInfo.baseData.productName; //产品名称
        this.formModel.produceTaskBillCode = this.form.produceTaskBillNo;
        // this.formModel.orderProductVersion =
        //   res.productInfo.baseData.productLayout +
        //   "V" +
        //   res.productInfo.baseData.newVersion +
        //   "." +
        //   res.productInfo.baseData.updateVersion; //版本版面
        this.formModel.version = res.productInfo.baseData.newVersion +
          "." +
          res.productInfo.baseData.updateVersion
          this.formModel.customerCode = res.productInfo.baseData.customerCode
        this.formModel.customerBillNo = res.orderBaseData.customerBillNo; //客户单号
        this.formModel.saleOrderNo = res.baseData.saleOrderNo; //销售订单号
        this.formModel.customerName = res.productInfo.baseData.customerName; //所属客户
        this.formModel.productUnion = res.productInfo.baseData.productUnit; //单位
        this.getUnitName()
        this.formModel.calculationMethod = Number(
          res.productInfo.baseData.calculationMethod
        );
        if (res.productInfo.baseData.calculationMethod == 0) {
          this.packingUnitLable = "张";
          this.packingUnit = "套";
        } else if (res.productInfo.baseData.calculationMethod == 1) {
          this.packingUnitLable = "套";
          this.packingUnit = "张";
        }
        if (this.ops == "edit") {
          this.formModel.mxDataList.push({isShow: true});
          for (let index = 0; index < 20; index++) {
            this.formModel.mxDataList.push({isShow: false});
          }
        }
        this.packingUnit = this.formModel.productUnion
        this.workmanshipModel = true;
      });
    },

    //确认提交事件
    handleConfirmSubmit() {
      const _data3 = {
        handInID: this.rowID,
      };
      this.$api.product
        .SureProductHandInBill(_data3)
        .then(() => {
          let parmas = {
              templateTypeCode: "MBLX0004", //	模板类型编号
              customerCode: this.formModel.customerCode,
              condition: {
                HandInBillNo: this.formModel.handInBillNo,
              }, //查询条件
            };
            this.$api.system.DownLoadTemplate(parmas).then((ress) => {
              window.open(ress);
            });
          this.workmanshipModel = false;
          this.getAllMaterils();
          this.$message({
            message: "确认成功",
            type: "success",
          });
        })
        .catch(() => {
        });
    },

    //删除
    handleDelete(row) {
      const _data = {
        handInID: row.handInID,
      };
      this.$confirm("确定删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.product
          .DeleteProductHandInBill(_data)
          .then(() => {
            this.getAllMaterils();
            this.$message({
              message: "删除成功",
              type: "success",
            });
          })
          .catch(() => {
          });
      });
    },

    //获取列表
    getAllMaterils() {
      const parmas = this.search;
      this.searchLoading = true;
      this.isShowOption = false;
      this.$api.product
        .GetPageProductHandInBills(parmas)
        .then((res) => {
          this.isShowOption = true;
          let list = res.list;
          
          list.forEach((item) => {
            item.isWithdraw = 0
            if (item.craftWorkState == 1) {
              item.craftWorkState = "已完成";
            } else {
              item.craftWorkState = "作业中";
            }
            if (item.inStockState != 1 && item.handInBillState == 1
            ) {
              item.isWithdraw = 1;
            }
          });
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount;
          this.searchLoading = false;
        })
        .catch(() => {
          this.searchLoading = false;
          this.isShowOption = true;
        });
    },

    //获取缴库箱数
    changHandInBoxs(row) {
      if (row.handInQuantity>0){
        let num = row.handInQuantity / row.eachBoxQuantity
        row.handInBoxs = Math.ceil(num)
        if ([NaN,Infinity].includes(row.handInBoxs)){
          row.handInBoxs=0
        }else{
          let text=''
          if (row.handInQuantity<=row.eachBoxQuantity){
            text=row.handInQuantity+this.packingUnit+'*1箱'
          }else{
            text=row.eachBoxQuantity+this.packingUnit+'*'+Math.floor(num)+'箱'
            if (row.handInQuantity % row.eachBoxQuantity!==0){
              text=text+'+'+row.handInQuantity % row.eachBoxQuantity+this.packingUnit+'*1箱'
            }
          }
          this.$set(row,'packageDescription',text)
          // row.packageDescription=text
        }
      }
      console.log(row)
      if (row.eachWeight){
        row.kilogramQuantity=row.eachWeight*row.handInQuantity
        if (row.cartonWeight){
          row.kilogramQuantity+=row.handInBoxs*row.cartonWeight
        }
        row.kilogramQuantity=row.kilogramQuantity.toFixed(0)
      }
    },
    //公斤数
    changKilogramQuantity(row) {
      if (row.cartonWeight){
        row.eachWeight=(row.kilogramQuantity-row.handInBoxs*row.cartonWeight)/row.handInQuantity
      }else{
        row.eachWeight=row.kilogramQuantity/row.handInQuantity
      }
    },
    //计算
    calculation(row, index) {

      if (this.formModel.productStyle == 2) {
        //卷式
        if (row.eachBoxPackageQuantity) {
          //计算每箱数量 每箱数量=每箱卷数*每卷等于_枚
          row.eachBoxQuantity = row.eachBoxPackageQuantity * this.formModel.pageEqualTags
        }

        /*this.formModel.mxDataList.forEach((item) => {
          if (item.eachBoxPackageQuantity) {
            let describe =
              "1箱*" +
              item.eachBoxPackageQuantity +
              "卷*" +
              this.formModel.pageEqualTags +
              "枚";
            this.$set(item, 'packageDescription', describe)
          }
        });*/
      } else {
        if (row.eachBoxPackageQuantity) {
          //计算每箱数量 每箱数量=每箱包数*每张等于*每包等于
          this.$set(row, 'eachBoxQuantity', row.eachBoxPackageQuantity * this.formModel.pageEqualTags * this.formModel.packageEqualPages)
        }

        /*if (this.formModel.productUnit == "枚") {
          //单标
          this.formModel.mxDataList.forEach((item) => {
            if (item.eachBoxPackageQuantity) {
              let describe =
                "1箱*" +
                item.eachBoxPackageQuantity +
                "包*" +
                this.formModel.packageEqualPages +
                "张*" +
                this.formModel.pageEqualTags +
                "枚";
              this.$set(item, 'packageDescription', describe)
            }
          });
        } else {
          if (this.formModel.calculationMethod == 0) {
            this.formModel.mxDataList.forEach((item) => {
              if (item.eachBoxPackageQuantity) {
                let describe =
                  "1箱*" +
                  item.eachBoxPackageQuantity +
                  "包*" +
                  this.formModel.packageEqualPages +
                  "张*" +
                  this.formModel.pageEqualTags +
                  "套";
                this.$set(item, 'packageDescription', describe)
              }
            });
          } else {
            this.formModel.mxDataList.forEach((item) => {
              if (item.eachBoxPackageQuantity) {
                let describe =
                  "1箱*" +
                  item.eachBoxPackageQuantity +
                  "包*" +
                  this.formModel.packageEqualPages +
                  "张*1/" +
                  this.formModel.pageEqualTags +
                  "套";
                this.$set(item, 'packageDescription', describe)
              }
            });
          }
        }*/
      }
      this.changHandInBoxs(row)
      this.$forceUpdate()
    },

    // 获取列表表格表头
    getTableHead() {
      const parmas = {
        tableCode: this.$config.producehandinbilllist,
      };
      this.$api.common.getAllTableHead(parmas).then((res) => {
        res.sort(arraySort("columnSort"));
        this.tableData.thead = res;
        // 得到客户汇总所有数据列表
        this.getAllMaterils();
      });
    },
    // 删除基础数据分组
    deleteMaterielClass(data) {
      const parmas = {
        entityID: data.groupID,
      };
      this.$confirm("确定删除该分组, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.mater.DeleteGoodsGroup(parmas).then(() => {
          this.getAllMaterils();
          this.$message({
            message: "删除成功",
            type: "success",
          });
        });
      });
    },

    //保存并确定
    handleSaveConfirm() {
      this.formModel.mxDataList = this.formModel.mxDataList.filter(
        (item, index) => {
          return item.packageGuiGeNo;
        }
      );
      let arr = JSON.parse(JSON.stringify(this.formModel.mxDataList))
      let state = true
      let packNum = true
      let describe = true
      let kilogram = true
      arr.forEach((item) => {
        if (!item.packageGuiGeNo || !item.productSpecificationCode) {
          state = false
        }
        if (!item.packageDescription) {
          describe = false
        }
        if (!item.kilogramQuantity) {
          kilogram = false
        }

        if (!item.eachBoxPackageQuantity) {
          packNum = false
        }
      })
      if (!state) {
        this.$message.warning('请选择成品型号！')
        return
      }
      if (!describe) {
        this.$message.warning('请输入包装描述！')
        return
      }
      if (!kilogram) {
        this.$message.warning('请输入公斤数！')
        return
      }
      if (!packNum) {
        this.$message.warning('请输入每箱包卷数！')
        return
      }
      this.formModel.mxDataList = JSON.parse(JSON.stringify(arr))
      if (this.ops == "add") {
        this.formModel.productCode = this.productFrom.productInfo.baseData.productCode
        this.$api.business
          .UpdateProductPackage(this.formModel)
          .then(() => {
            this.$api.product
              .CreateProductHandInBill(this.formModel)
              .then((res) => {
                this.getAllMaterils();
                const _data3 = {
                  handInID: res.handInID,
                };
                this.$api.product
                  .SureProductHandInBill(_data3)
                  .then(() => {
                    let parmas = {
                        templateTypeCode: "MBLX0004", //	模板类型编号
                        customerCode: this.formModel.customerCode,
                        condition: {
                          HandInBillNo: res.handInBillNo,
                        }, //查询条件
                      };
                      this.$api.system.DownLoadTemplate(parmas).then((ress) => {
                        window.open(ress);
                      });
                    this.workmanshipModel = false;
                    this.getAllMaterils();
                    this.$message({
                      message: "确认成功",
                      type: "success",
                    });
                  })
                  .catch(() => {
                  });
              })
              .catch(() => {
              });
          })
      } else if (this.ops == "edit") {
        this.formModel.productCode = this.productFrom.productInfo.baseData.productCode
        this.$api.business
          .UpdateProductPackage(this.formModel)
          .then(() => {
            this.$api.product
              .UpdateProductHandInBill(this.formModel)
              .then(() => {
                const _data3 = {
                  handInID: this.rowID,
                };
                this.$api.product
                  .SureProductHandInBill(_data3)
                  .then(() => {
                    let parmas = {
                        templateTypeCode: "MBLX0004", //	模板类型编号
                        customerCode: this.formModel.customerCode,
                        condition: {
                          HandInBillNo: this.formModel.handInBillNo,
                        }, //查询条件
                      };
                      this.$api.system.DownLoadTemplate(parmas).then((ress) => {
                        window.open(ress);
                      });
                    this.workmanshipModel = false;
                    this.getAllMaterils();
                    this.$message({
                      message: "确认成功",
                      type: "success",
                    });
                  })
                  .catch(() => {
                  });
              })
              .catch(() => {
                this.workmanshipModel = false;
              });
          })
      }
    },

    //保存
    handleSave() {
      console.log(this.formModel)
      this.formModel.mxDataList = this.formModel.mxDataList.filter(
        (item, index) => {
          return item.packageGuiGeNo;
        }
      );
      let arr = JSON.parse(JSON.stringify(this.formModel.mxDataList))
      let state = true
      let packNum = true
      let describe = true
      let kilogram = true
      arr.forEach((item) => {
        if (!item.packageGuiGeNo || !item.productSpecificationCode) {
          state = false
        }
        if (!item.packageDescription) {
          describe = false
        }
        if (!item.kilogramQuantity) {
          kilogram = false
        }

        if (!item.eachBoxPackageQuantity) {
          packNum = false
        }
      })
      if (!state) {
        this.$message.warning('请选择成品型号！')
        return
      }
      if (!describe) {
        this.$message.warning('请输入包装描述！')
        return
      }
      if (!kilogram) {
        this.$message.warning('请输入公斤数！')
        return
      }
      if (!packNum) {
        this.$message.warning('请输入每箱包卷数！')
        return
      }
      this.formModel.mxDataList = JSON.parse(JSON.stringify(arr))
      if (this.ops == "add") {
        console.log(this.productFrom)
        this.formModel.productCode = this.productFrom.productInfo.baseData.productCode
        this.$api.business
          .UpdateProductPackage(this.formModel)
          .then(() => {
            this.$api.product
              .CreateProductHandInBill(this.formModel)
              .then(() => {
                this.getAllMaterils();
                this.workmanshipModel = false;
                this.$message({
                  message: "保存成功",
                  type: "success",
                });
              })
          })
          .catch(() => {
            this.formModel.mxDataList.push({isShow: true});
            for (let index = 0; index < 20; index++) {
              this.formModel.mxDataList.push({isShow: false});
            }
          });
      } else if (this.ops == "edit") {
        this.formModel.productCode = this.productFrom.productInfo.baseData.productCode
        this.$api.business
          .UpdateProductPackage(this.formModel)
          .then(() => {
            this.$api.product
              .UpdateProductHandInBill(this.formModel)
              .then(() => {
                this.workmanshipModel = false;
                this.getAllMaterils();
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
              })
              .catch(() => {
                this.workmanshipModel = false;
                this.formModel.mxDataList.push({isShow: true});
                for (let index = 0; index < 20; index++) {
                  this.formModel.mxDataList.push({isShow: false});
                }
              });
          })
      }
    },

    //纸箱列表搜索
    handleSearch() {
      this.searchCarton.pageIndex = 1;
      this.getCartonList();
    },

    // 纸箱列表数据
    getCartonList() {
      const parmas = this.searchCarton;
      this.$api.system
        .GetPageCartonConfigurationList(parmas)
        .then((res) => {
          this.cartonList = res.list;
          this.totalCarton = res.totalCount;
        })
        .catch(() => {
        });
    },

    handleFocus(index) {
      this.formModel.mxDataList.forEach((item) => {
        item.showPopover = false;
      });
      this.formModel.mxDataList[index].showPopover = true;
      this.rowIndex = index;
    },

    //纸箱列表双击事件
    handleCartonDblclick(row, index, event) {
      if (this.productInfo.productPackingInfoList && this.productInfo.productPackingInfoList.length > 0) {
        this.productInfo.productPackingInfoList.forEach((item) => {
          if (item.cartonCode == row.cartonCode) {
            this.$set(this.formModel.mxDataList[this.rowIndex], 'eachBoxPackageQuantity', row.boxEqualPackages)
            this.$set(this.formModel.mxDataList[this.rowIndex], 'packageDescription', row.describe)
          }
        })
      }

      if (this.formModel.mxDataList[this.rowIndex].cartonName) {
        this.$set(this.formModel.mxDataList[this.rowIndex], 'cartonName', row.cartonName)
        this.$set(this.formModel.mxDataList[this.rowIndex], 'packageGuiGeNo', row.cartonCode)
        this.$set(this.formModel.mxDataList[this.rowIndex], 'cartonWeight', row.cartonWeight)
        // this.$set(this.formModel.mxDataList[this.rowIndex], 'handInMxRemark', row.remark)
        // this.formModel.mxDataList[this.rowIndex].packageDescription = describe;
      } else {
        this.$set(this.formModel.mxDataList[this.rowIndex], 'cartonName', row.cartonName)
        this.$set(this.formModel.mxDataList[this.rowIndex], 'packageGuiGeNo', row.cartonCode)
        this.$set(this.formModel.mxDataList[this.rowIndex], 'cartonWeight', row.cartonWeight)
        // this.$set(this.formModel.mxDataList[this.rowIndex], 'handInMxRemark', row.remark)
        this.$set(this.formModel.mxDataList, this.rowIndex + 1, {
          isShow: true,
          // packageDescription: describe,
        });
        this.$forceUpdate();
      }
      this.$refs["popover" + this.rowIndex].doClose();
    },

    //复制明细
    handleCopyRow(row, index) {
      let arr = JSON.parse(JSON.stringify(row));
      arr.rowKey = Date.now();
      this.formModel.mxDataList.splice(index, 0, arr);

      // this.formModel.mxDataList.push(JSON.parse(JSON.stringify(row)));
    },

    //删除明细
    handleDeleteRow(row, index) {
      this.formModel.mxDataList.splice(index, 1);
    },

    ////每一行的回调方法
    rowClassName({row}) {
      if (!row.isShow) {
        return "showRow";
      }
    },

    //下载装箱单
    handleDownload(row) {
      let parmas = {
        templateTypeCode: "MBLX0001", //	模板类型编号
        customerCode: row.customerCode, //	客户编号
        condition: {
          HandInBillNo: row.handInBillNo,
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },

    //下载缴库单
    handleDownloadTreasury(row) {
      let parmas = {
        templateTypeCode: "MBLX0004", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          HandInBillNo: row.handInBillNo,
          HandInType:-1
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },

    //下载发货缴库单
    handleDownloadTreasury1(row) {
      let parmas = {
        templateTypeCode: "MBLX0004", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          HandInBillNo: row.handInBillNo,
          HandInType:0
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },

    //下载库存缴库单
    handleDownloadTreasury2(row) {
      let parmas = {
        templateTypeCode: "MBLX0004", //	模板类型编号
        customerCode: row.customerCode,
        condition: {
          HandInBillNo: row.handInBillNo,
          HandInType:1
        }, //查询条件
      };
      this.$api.system.DownLoadTemplate(parmas).then((res) => {
        window.open(res);
      });
    },

    //包装信息计算方式选择事件
    handleSelectChange(val) {
      if (val == 0) {
        this.formModel.pageEqualTags = 1 / this.formModel.pageEqualTags;
        this.formModel.boxEqualTags =
          this.formModel.pageEqualTags *
          this.formModel.packageEqualPages *
          this.formModel.boxEqualPackages;
        this.packingUnitLable = "张";
        this.packingUnit = "套";
        console.log(this.formModel.pageEqualTags);
      } else if (val == 1) {
        this.formModel.pageEqualTags = 1 / this.formModel.pageEqualTags;
        this.formModel.boxEqualTags =
          (this.formModel.packageEqualPages / this.formModel.pageEqualTags) *
          this.formModel.boxEqualPackages;
        this.packingUnitLable = "套";
        this.packingUnit = "张";
        console.log(this.formModel.pageEqualTags);
      }
      this.$forceUpdate();
    },
    // 清除所有查询条件
    Refresh() {
      this.search.pageIndex = 1;
      // this.search = this.$options.data().search
      this.getAllMaterils();
    },

    //切换禁用/启用状态
    handleSwich() {
      this.search.pageIndex = 1;
      this.getAllMaterils();
    },

    // 新建弹框关闭事件
    closeDialog() {
      this.formModel = JSON.parse(JSON.stringify(this.copyForm));
      // this.showPopover = false;
      // this.formModel.mxDataList[this.rowIndex].showPopover = false
      this.getAllMaterils();
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-form--label-top .el-form-item__label {
  padding: 0;
}

::v-deep .dialogInlineForm .el-form-item__content {
  margin-right: 0;
}

::v-deep .showRow {
  display: none;
}

.list-item {
  float: left;
  width: 32%;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid #e6e6e6;
}

.finish {
  background: #f0f9eb;
  color: #67c23a;
  border-color: #67c23a;
}

.conduct {
  background: #ecf5ff;
  color: #3967ff;
  border-color: #3967ff;
}

.conduct:hover {
  color: #fff;
  background: #3967ff;
}

.head-info {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e6e6e6;
  padding: 0 16px;
}

.item-content {
  margin-top: 8px;
  padding: 16px;

  h1 {
    text-align: center;
    font-size: 26px;
  }

  p {
    text-align: center;
  }
}

.materielList {
  max-height: calc(100vh - 190px);
  overflow-y: auto;
}

.addWuliaoBox {
  padding: 10px 16px;
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.container {
  height: 100%;
}

.permangeRg {
  border: 1px solid #e6e6e6;
  background: #fff;
  margin-left: 10px;
  height: 100%;
  width: calc(100% - 280px);

  .mainTT {
    font-size: 16px;
    font-weight: bold;
    width: 100%;
    padding: 18px 16px;
    padding-bottom: 0;
  }
}

.permanageLf {
  width: 280px;
  height: 100%;
  border: 1px solid #e6e6e6;
  background: #fff;

  .kuOP {
    display: none;
  }

  li {
    padding: 9px 16px;
    cursor: pointer;

    &:hover {
      background: #3f61f110;
      color: #3f61f1;

      .kuOP {
        display: block !important;
      }
    }
  }

  li.on {
    background: #3f61f110;
    color: #3f61f1;
  }

  .allMateriel {
    line-height: 44px;
    padding-left: 16px;

    &:hover {
      background: #3f61f110;
      color: #3f61f1;
    }
  }

  .allMateriel.crt {
    background: #3f61f110;
    color: #3f61f1;
  }
}

.navTT {
  line-height: 22px;
  padding: 16px;
}

.areasOp {
  li {
    padding: 8px 16px;
    cursor: pointer;

    &:hover {
      background: #f6f6f6;
    }
  }
}

.lNavt {
  padding-right: 4px;
  background: #f7f8fa;

  .itemCon {
    display: flex;
    margin: 10px;
    padding: 0 5px;
    width: 100%;
  }
}

.colorList {
  margin-top: 10px;

  li {
    border: 1px solid #eeeeef;
    margin-bottom: 10px;

    .fName {
      position: relative;

      &:before {
        content: "";
        position: absolute;
        left: 0;
        height: 22px;
        border-left: 3px solid #3f61f1;
        top: -1px;
      }
    }

    .colorCon {
      line-height: 22px;
      padding: 16px;
    }
  }
}

.newLayeeCon {
  margin-top: 10px;

  .el-button {
    width: 100%;
  }
}

.tabCon {
  width: 100%;
  padding: 0 16px;

  .btnlist {
    display: flex;
    justify-content: end;
    padding: 0 16px;
    margin: 16px;
  }
}

.tagsBox {
  display: flex;
  flex: 1;
  height: 100%;
  width: 100%;

  .tagsRgBox {
    width: 320px;
    flex-shrink: 0;
    height: 100%;
    border-left: 1px solid #e6e6e6;
    background: #fff;
    overflow: auto;

    .tabBox {
      ul {
        li {
          width: 33.3%;
          text-align: center;
          height: 32px;
          line-height: 32px;
          border-right: 1px solid #e6e6e6;
          background: #f7f8faff;
          border-bottom: 1px solid #e6e6e6;
          cursor: pointer;

          &:last-child {
            border-right: none;
          }

          &.on {
            background: #fff;
            border-bottom: 1px solid #fff;
          }
        }
      }
    }
  }
}

.permain {
  // align-items: baseline;
  line-height: 40px;
  height: 40px;

  .input {
    width: 100%;
    height: 28px;
    line-height: 28px;
    border-radius: 4px 0 0 4px;
    border: 1px solid #dcdfe6;

    span {
      display: inline-block;
      font-size: 12px;
      height: 22px;
      line-height: 22px;
      padding: 2px 5px;
      background-color: #f5f6f9;
      margin: 2px 5px;
    }
  }

  .bgc57 {
    height: 28px;
    background-color: #f5f7fa;
    border-radius: 0px 4px 4px 0px;
    margin-left: -1px;
  }
}

.cwapper {
  flex: 1;
  flex-direction: column;
  margin-left: 8px;

  .vss {
    height: 100%;
    border: 1px solid #e6e6e6;
    border-radius: 4px;
    overflow: hidden;
  }
}

.infoSCDD {
  background-color: #fff;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
  border-radius: 4px;
  border: 1px solid #e6e6e6;
  padding: 16px;
  margin-bottom: 8px;

  span {
    margin-right: 20px;
    color: #999aaa;
  }
}

.tableCon {
  border: 1px solid #e6e6e6;
}

.cHeader {
  text-align: start;
  font-weight: 600;
  line-height: 44px;
  padding: 0 12px;
  border-bottom: 1px solid #e6e6e6;
}

.fleft {
  border-right: 1px solid #d8d8d8;
  padding: 16px;
}

.fright {
  padding: 16px;

  .count {
    display: flex;
    align-items: center;
    color: #999aaa;
  }

  .el-form-item:not(:last-child) {
    margin-bottom: 8px;
  }
}

.subTipBtn {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 8px 16px;
}

.cenCon {
  width: 260px;
  height: 100%;
  position: relative;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #fff;
  border-right: 1px solid #e6e6e6;

  .itemCenter {
    margin: 10px 0;

    .cenItem {
      margin: 5px 0;
    }

    .carftItem {
      padding: 5px 0;
      font-size: 12px;

      &.active {
        background-color: #f7f8fa;

        .intax {
          background-color: #3f61f1;
          color: #ffffff;
        }

        .name_text {
          color: #3f61f1;
        }
      }

      div {
        margin: 10px;
        font-weight: 400;
        color: #999aaa;
        padding-left: 50px;
      }

      .name {
        padding-left: 0px;

        .name_text {
        }
      }

      .intax {
        display: inline-block;
        background: #f5f6f9;
        border-radius: 2px;
        padding: 5px;
        width: 40px;
        text-align: center;
        margin-right: 10px;
      }
    }
  }

  .addPeoduct {
    cursor: pointer;
    background-color: #3f61f1;
    text-align: center;
    color: #ffffff;
    border-radius: 4px;
    margin: 16px;
    padding: 10px 0;
  }
}

.PBinfo {
  width: 30%;
  margin: 0 10px;
  display: inline-block;
}

.colorPic {
  height: 100%;
  margin: 0 0 5px 0;
  overflow: hidden;

  .img_c {
    width: 250px;
    height: 250px;
    align-items: center;
    justify-content: center;
    display: flex;
    background-color: #e6e6e6;
    margin: 5px 5px;
    // text-align: center;
    position: relative;

    .text {
      position: absolute;
      top: 0;
      left: 0;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      line-height: 22px;
      background: #000000;
      padding: 2px 5px;
      border-radius: 0px 0px 4px 0px;
      opacity: 0.5;
    }

    .yulan {
      width: 24px;
      height: 24px;
      border-radius: 4px;
      position: absolute;
      bottom: 10px;
      right: 16px;
      z-index: 8;
      color: #fff;
      background: #7f7f7f;
    }

    .img_i {
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
    }
  }
}

.subTip {
  border-bottom: 1px #e6e6e6 solid;
  background: #f5f6f9;
  padding: 13px 16px;
  margin-bottom: 10px;
}

.formBox {
  padding: 0 16px;

  .order {
    padding: 10px 0;
  }
}

.leftCon {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  background: #fff;
  width: 320px;
  padding: 0 0 16px;
  border-radius: 4px;
  border: 1px #e6e6e6 solid;
}

.cenright {
  flex: 1;
  background-color: #ffffff;
  height: 100%;
  overflow: auto;

  .zy_add {
    margin: 16px 16px;
  }

  .zy_item {
    background: #ffffff;
    border: 1px solid #eeeeee;
    margin: 0 0 16px;

    .zy_header {
      display: flex;
      align-items: center;
      background: #f5f6f9;
      padding: 5px 5px 5px 16px;

      span {
        margin-right: 20px;
        color: #999aaa;
      }
    }

    .zy_info {
      padding: 16px;
      display: flex;
      flex-wrap: wrap;
      color: #999aaa;

      .divt {
        width: 33%;
        margin: 8px 0;
      }

      .cot {
        width: 100%;
      }

      .bigdialogTbCon {
        width: 100%;
        border: 1px solid #eeeeee;

        .ht {
          line-height: 44px;
          width: 100%;
          background: #f7f8fa;
          margin: 0;
          padding: 0 16px;

          span {
            font-weight: 600;
            color: #333333;
          }
        }
      }
    }
  }
}

.orderForm {
  height: calc(100%);
  width: 100%;
}

.mainCenter {
  height: calc(100% - 52px);
  width: 100%;
  overflow-x: hidden;
  padding: 8px;
}

.container {
  height: 100%;
  width: 100%;
}

.tagCon {
  width: 100%;
  flex: 1;
  overflow-x: hidden;
  margin: 0px 0 0 10px;
  background-color: #ffffff;

  .cginfo {
    margin: 0 16px;
  }

  .selectCon {
    line-height: 44px;
    text-align: center;
    background: #ffffff;
    border-radius: 4px 4px 0px 0px;
    border: 1px solid #e6e6e6;

    span {
      display: inline-block;
      margin: 0 32px;
      font-size: 16px;
      line-height: 44px;
      font-weight: 600;
      color: #333333;
      cursor: pointer;

      &.select {
        color: #3f61f1;
        border-bottom: 2px solid #3f61f1;
      }
    }
  }

  .tagList {
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.05);
    border: 1px solid #e6e6e6;
    margin: 16px;

    .listNav {
      height: 44px;
      padding: 0 14px;
      background: #f5f6f9;
      border-bottom: 1px solid #e6e6e6;
    }

    .tagShow {
      background-color: #ffffff;
      border: 1px solid #e4e7ed;

      .tagBaseList {
        padding: 14px;
        padding-bottom: 8px;

        li {
          line-height: 24px;
          width: 50%;
          margin: 5px 0;
        }

        .titles {
          width: 100px;
        }
      }

      .layerTable {
        padding: 16px;
        padding-top: 0;

        .border {
          border: solid #ebeef5;
          border-width: 0 1px 0 1px;
        }
      }
    }
  }
}

.orderRemark {
  line-height: 24px;
  padding-bottom: 16px;
}

.orderContent {
  flex: 1;
}

.drgCard {
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  padding: 5px 0;
  text-align: center;
  // line-height: 44px;
  align-items: center;

  .line_div {
    width: 120px;

    &.w15 {
      width: 15%;
    }

    &.w10 {
      width: 80px;
    }

    &.mlr10 {
      margin: 0 10px 0 0;
    }
  }
}

.tableBox {
  margin-top: 10px;
  overflow: hidden;
  border: 1px #e6e6e6 solid;
  border-bottom: none;

  .bigdialogTable {
    span {
      display: inline-block;
      text-align: center;
      font-weight: bold;
      width: 120px;

      &.w15 {
        width: 15%;
      }

      &.w10 {
        width: 10%;
      }
    }
  }

  .tt {
    height: 38px;
    line-height: 38px;
    background: #f7f8fa;
    padding-left: 16px;
  }

  .title {
    border-radius: 0;
    border: 1px solid #e6e6e6;
  }
}

::v-deep .formItem {
  .el-form-item {
    margin-bottom: 0;
    color: #999aaa;
  }

  .min_item .el-form-item__label {
    line-height: 28px;
    color: #999aaa;
  }

  .min_item .el-form-item__content {
    line-height: 28px;
  }

  .el-form-item__label {
    line-height: 28px;
    color: #999aaa;
  }

  .el-form-item__content {
    line-height: 28px;
    height: 28px;
    color: #333;

    .el-input-group {
      vertical-align: initial;
      margin-top: 0;
    }
  }

  .el-select,
  .el-date-editor.el-input {
    width: 100%;
  }

  .el-textarea {
    vertical-align: middle;
  }
}
</style>
<style lang="scss">
.el-loading-mask {
  top: 0;
}

.operations {
  display: flex;
  align-items: center;
}

.operations i {
  padding-right: 5px;
}

.operations > span:first-child {
  padding-right: 5px;
}

.operations > span {
  font-weight: 400;
  color: #000;
  cursor: pointer;
}

.operations > span:last-child {
  padding-left: 5px;
}

.d_treeBox {
  margin-right: 0 !important;
  border-radius: 10px 0 0 10px;
  border-right: none !important;
}

.d_main {
  border-radius: 0 10px 10px 0;
}
.case {
  background: #fff;
  border-left: 1px solid #e6e6e6;
}
</style>
